<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form-item label="试题类型" v-bind="validateInfos.type">
            <j-dict-select-tag v-model:value="formData.type" :show-choose-option="false" dictCode="question_type"
              @change="handleTypeChange" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="试题内容" v-bind="validateInfos.content">
            <a-input v-model:value="formData.content"></a-input>
          </a-form-item>
        </a-col>
        <a-input v-model:value="formData.answer" style="width: 100%;display: none" />
        <a-input v-model:value="formData.bankId" style="width: 100%;display: none" />
      </a-row>
      <!-- 答案列表 -->
      <LabExamQuestionTable ref="registerQuModal"></LabExamQuestionTable>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
// import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
// import { getValueType } from '/@/utils';
import { saveOrUpdate, queryLabAnswers } from '../LabExamQuestion.api';
import { Form } from 'ant-design-vue';
import LabExamQuestionTable from './LabExamQuestionTable.vue'


const formRef = ref();
const bank_id = ref("");
const registerQuModal = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  type: '',
  image: '',
  content: '',
  answer: '',
  score: '',
  analysis: '',
  remark: '',
  bankId: '',
  labExamQuestionAnswerList: [],
});

function reset() {
  formData.id = '';
  formData.type = '';
  formData.image = '';
  formData.content = '';
  formData.answer = '';
  formData.score = '';
  formData.analysis = '';
  formData.remark = '';
  formData.bankId = '';
  formData.labExamQuestionAnswerList = [];
}
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
  type: [{ required: true, message: '请选择试题类型!' },],
  content: [{ required: true, message: '请输入试题内容!' },],

};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });

/**
 * 新增
 */
function add(bankId) {
  edit({});
  // formData.bankId = bankId;
  bank_id.value = bankId
}

/**
 * 编辑
 */
async function edit(record) {
  reset();
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
  });
  registerQuModal.value.formData.labExamQuestionAnswerList = [];
  if (record.id != null && record.id != "") {
    formData.labExamQuestionAnswerList = (await queryLabAnswers({ id: record.id }))
    registerQuModal.value.handleAddS(formData.labExamQuestionAnswerList);
  }
}

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);

  formData.labExamQuestionAnswerList = registerQuModal.value.formData.labExamQuestionAnswerList;
  if (formData.id != "" && formData.id != null) {
    isUpdate.value = true;
  }
  formData.answer = '';
  formData.labExamQuestionAnswerList.forEach((answer) => {
    if (answer.isRight) {
      if (formData.type == '单选题') {
        let result = answer.content.substring(0, 1);
        formData.answer = result;
      } else if (formData.type == '多选题') {
        let result = answer.content.substring(0, 1);
        if (formData.answer == '' || formData.answer == null) {
          formData.answer = result;
        } else {
          formData.answer = formData.answer + ',' + result;
        }
      } else {
        formData.answer = answer.content;
      }
    }
  });
  if (formData.bankId == null || formData.bankId == "") {
    formData.bankId = bank_id.value
  }
  await saveOrUpdate(formData, isUpdate.value)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}


function handleTypeChange(v) {
  formData.labExamQuestionAnswerList = []
  if (v === '判断题') {
    formData.labExamQuestionAnswerList.push({ isRight: false, content: '正确' })
    formData.labExamQuestionAnswerList.push({ isRight: false, content: '错误' })
    registerQuModal.value.handleAddS(formData.labExamQuestionAnswerList);
  } else if (v === '单选题' || v === '多选题') {
    formData.labExamQuestionAnswerList.push({ isRight: false, content: 'A.' })
    formData.labExamQuestionAnswerList.push({ isRight: false, content: 'B.' })
    formData.labExamQuestionAnswerList.push({ isRight: false, content: 'C.' })
    formData.labExamQuestionAnswerList.push({ isRight: false, content: 'D.' })
    registerQuModal.value.handleAddS(formData.labExamQuestionAnswerList);
  }
}


defineExpose({
  add,
  edit,
  submitForm,
  handleTypeChange,
});


</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 500px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}
</style>
